<template>
	<div class="device">
		<!--头部-->
		<div class="device-header">
			<div class="d-title" ref="dTitle">
				产品中心
			</div>
			<div class="d-index" ref="dIndex">
				PRODUCT CENTER
			</div>
		</div>

		<!--产品-->
		<div class="content" v-for="item in product">
			<div ref="listProduct" class="list-product">
				<div class="list-left">
					<div class="info">
						<h3>{{ item.name }}</h3>
						<p>{{item.info}}</p>
					</div>
				</div>
				<div class="list-right">
					<div class="img-box">
						<img :src="item.imgUrl">
					</div>
				</div>
			</div>
		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			// 初始化页面完成执行动画
			initiateAnimation() {
				this.$refs.dTitle.style.animation = "fadeInDowns 0.6s ease-out forwards"
				this.$refs.dIndex.style.animation = "fadeInDowns 0.8s ease-out forwards"
				this.$refs.listProduct[0].style.animation = "fadeInDownsProduct 1s ease-out forwards"
			},
			// 动画
			animationShow() {
				if (this.$refs.listProduct[0]) {
					var innerHeights = window.innerHeight

					this.$refs.listProduct.forEach((i) => {

						if (innerHeights - i.getBoundingClientRect().top > 80) {
							i.style.animation = "fadeInDownsProduct 0.8s ease forwards"
						} else if(innerHeights - i.getBoundingClientRect().top < -30) {
							i.style.animation = "none"
							i.style.opacity = "0"
						}
					})

				}
			}
		},
		mounted() {
			this.initiateAnimation()
			window.addEventListener("scroll", this.animationShow);
		},
		computed: {
			product() {
				return [{
					imgUrl: require("@/static/product/wew.jpg"),
					name: this.$t("volvoUnit.name"),
					info: this.$t("volvoUnit.introduce")
				}, {
					imgUrl: require("@/static/product/pjs.jpg"),
					name: this.$t("perkinsUnit.name"),
					info: this.$t("perkinsUnit.introduce")
				}, {
					imgUrl: require("@/static/product/kms.jpg"),
					name: this.$t("cumminsUnit.name"),
					info: this.$t("cumminsUnit.introduce")
				}, {
					imgUrl: require("@/static/product/sc.jpg"),
					name: this.$t("upperEngineUnit.name"),
					info: this.$t("upperEngineUnit.introduce")
				}, {
					imgUrl: require("@/static/product/ntp.jpg"),
					name: this.$t("nanTongPaouUnit.name"),
					info: this.$t("nanTongPaouUnit.introduce")
				}, {
					imgUrl: require("@/static/product/wd.jpg"),
					name: this.$t("nonMovingUnit.name"),
					info: this.$t("nonMovingUnit.introduce")
				}, {
					imgUrl: require("@/static/product/yc.jpg"),
					name: this.$t("yuchaiDisesl.name"),
					info: this.$t("yuchaiDisesl.introduce")
				}, {
					imgUrl: require("@/static/product/hc.jpg"),
					name: this.$t("weiChaiUnit.name"),
					info: this.$t("weiChaiUnit.introduce")
				}, {
					imgUrl: require("@/static/product/wmdl.jpg"),
					name: this.$t("weiManUnit.name"),
					info: this.$t("weiManUnit.introduce")
				}, {
					imgUrl: require("@/static/product/kk.jpg"),
					name: this.$t("keKeUnit.name"),
					info: this.$t("keKeUnit.introduce")
				}]
			}
		},
	}
</script>

<style scoped>
	.device-header {
		width: auto;
		height: 200px;
		padding-top: 100px;
		border-bottom: 1px solid rgba(112, 112, 112, 0.1);
		text-align: center;
	}

	.d-title {
		font-weight: 300;
		font-size: 40px;
		letter-spacing: 1px;
		line-height: 1.7;
		opacity: 0;
	}

	.d-index {
		line-height: 1.2;
		font-size: 20px;
		font-family: "Montserrat-Light";
		opacity: 0;
	}

	/*产品*/
	.content {
		padding: 56px;
		background-color: #F9FAFC;
	}

	.list-product {
		margin: auto;
		height: 400px;
		background-color: #ffffff;
		opacity: 0;
	}

	.list-left {
		float: left;
		width: 45%;
		height: 100%;
	}

	.list-left .info {
		padding-top: 100px;
		padding-left: 40px;
		transition: all 0.5s;
	}

	.list-left .info:hover h3 {
		color: #2d65bc;
		cursor: pointer;
	}

	.list-left .info h3 {
		padding-bottom: 20px;
		font-weight: normal;
		font-size: 30px;
		transition: all 0.5s;
	}

	.list-left .info p {
		line-height: 1.4;
		width: 90%;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 7;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.list-right {
		float: right;
		width: 55%;
		height: 100%;
	}

	.list-right .img-box {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.list-right img {
		padding: 30px;
		width: 80%;
		height: 80%;
		object-fit: cover;
		transition: all 0.5s;

	}

	.list-right img:hover {
		transform: scale(1.1);
		cursor: pointer;

	}
</style>
